<template>
   <div :style="{ width: width }">
      <el-tooltip :content="text" :disabled="showTooltip" placement="top">
         <div class="span-ellipsis" @mouseover="onShowNameTipsMouseenter">
            {{ text }}
         </div>
      </el-tooltip>
   </div>
</template>

<script setup lang="ts">

import {ref} from "vue";

const props = defineProps({
   width: {
      type: String,
      default: '100%'
   },
   text: {
      type: String,
      default: ''
   }
})

const showTooltip  = ref<Boolean>(false);


const onShowNameTipsMouseenter = (e: Element) => {
   let target = e.target;
   let textLength = target.clientWidth;
   let containerLength = target.scrollWidth;
   showTooltip.value = textLength >= containerLength;
}


</script>


<style lang="scss" >

.span-ellipsis {
   width: 100%;
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
}

.el-popper.is-dark {
   max-width: 70%;
}
</style>











